<template>
  <div class="container">
    <!-- 左侧文件列表 -->
    <div class="file-list-container">
      <ul class="file-list">
        <li v-for="file in fileList" 
            :key="file" 
            @click="loadFile(file)"
            :class="{ 
              active: selectedFile === file
            }">
          {{ file }}
          <span class="file-type" :class="{ 
            'vue-type': isVueFile(file),
            'html-type': isHtmlFile(file)
          }">{{ getFileType(file) }}</span>
        </li>
      </ul>
    </div>
    
    <!-- 右侧展示区 -->
    <div class="iframe-container">
      <iframe v-if="selectedFile && isHtmlFile(selectedFile)" 
              :src="getFileUrl(selectedFile)" 
              width="100%" 
              height="100%"
              frameborder="0">
      </iframe>
      <div v-else-if="selectedFile && isVueFile(selectedFile)" 
           class="vue-component-container">
        <component v-if="currentComponent"
                  :is="currentComponent">
        </component>
        <div v-else class="loading">
          加载组件中...
        </div>
      </div>
      <div v-else class="placeholder">
        {{ placeholder }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FileList',
  
  props: {
    // 文件所在目录路径
    dirPath: {
      type: String,
      required: true
    },
    // 占位提示文字
    placeholder: {
      type: String,
      default: '请选择要查看的文件'
    }
  },

  data() {
    return {
      fileList: [],
      selectedFile: '',
      currentComponent: null
    };
  },

  mounted() {
    this.fetchFiles();
  },

  methods: {
    fetchFiles() {
      try {
        const htmlContext = require.context('@/views/', true, /\.html$/);
        const vueContext = require.context('@/views/', true, /\.vue$/);
        
        // 修改过滤逻辑，只获取一级目录文件
        const htmlFiles = htmlContext.keys()
          .filter(key => {
            // 检查是否为指定目录下的直接文件
            const regex = new RegExp(`^./${this.dirPath}/[^/]+\\.html$`);
            return regex.test(key);
          })
          .map(key => key.replace(`./${this.dirPath}/`, ''));
        
        const vueFiles = vueContext.keys()
          .filter(key => {
            // 检查是否为指定目录下的直接文件
            const regex = new RegExp(`^./${this.dirPath}/[^/]+\\.vue$`);
            return regex.test(key);
          })
          .map(key => key.replace(`./${this.dirPath}/`, ''))
          .filter(file => file !== 'index.vue');
        
        this.fileList = [...htmlFiles, ...vueFiles].sort();
      } catch (error) {
        console.error('加载文件列表失败:', error);
        this.fileList = [];
      }
    },

    async loadFile(file) {
      this.selectedFile = file;
      if (this.isVueFile(file)) {
        try {
          this.currentComponent = null; // 重置组件
          
          // 触发 before-load 事件
          await this.$emit('before-load', file);

          const module = await import(/* webpackChunkName: "[request]" */ `@/views/${this.dirPath}/${file}`);
          this.currentComponent = module.default;
        } catch (error) {
          console.error('加载Vue组件失败:', error);
        }
      }
    },

    getFileUrl(file) {
      return `/views/${this.dirPath}/${file}`;
    },

    isHtmlFile(file) {
      return file.endsWith('.html');
    },

    isVueFile(file) {
      return file.endsWith('.vue');
    },

    getFileType(file) {
      if (this.isVueFile(file)) return 'Vue';
      if (this.isHtmlFile(file)) return 'HTML';
      return '';
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.container {
  display: flex;
  height: calc(100vh - 60px);
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

.file-list-container {
  width: 340px;
  padding-right: 20px;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.file-list li {
  cursor: pointer;
  padding: 10px 16px;
  margin: 4px 0;
  border-radius: 4px;
  background-color: #f5f5f5;
  transition: all 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.file-list li:hover {
  background-color: #e0e0e0;
}

.file-list li.active {
  background-color: #1976d2;
  color: white;
}

.file-type {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
}

.vue-type {
  background-color: #42b983;
  color: white;
}

.html-type {
  background-color: #e34c26;
  color: white;
}

.iframe-container {
  flex: 1;
  padding-left: 20px;
  height: 100%;
  overflow: hidden;
}

.vue-component-container {
  height: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 16px;
}

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 16px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 适配小屏幕 */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    height: auto;
  }

  .file-list-container {
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
  }

  .iframe-container {
    padding-left: 0;
    height: calc(100vh - 200px);
  }
}
</style> 